@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.device-switcher__toolbar {
	display: none;
	flex: 1;

	.device-switcher__toolbar-devices {
		align-items: center;
		display: flex;
		height: 58px;
		gap: 18px;
		justify-content: center;

		> button {
			border-radius: 2px;
			height: 28px;
			padding: 0;
			transition: color 0.1s ease-in-out;

			svg {
				fill: currentColor;
				color: var(--studio-gray-10);
			}

			&.is-selected,
			&:hover,
			&:focus {
				box-shadow: none;

				svg {
					color: var(--studio-black);
				}
			}

			&:focus-visible {
				box-shadow: inset 0 0 0 2px var(--color-primary-light);
			}
		}
	}

	@include break-small {
		display: block;
	}
}
